<!--
 * @Author: xu xuejia
 * @Date: 2021-12-07 14:27:53
 * @LastEditors: xu xuejia
 * @LastEditTime: 2021-12-21 21:11:57
 * @Description: 获奖审核页面
 * @FilePath: \Management-of-Scientific-Research-in-Universities-Front\src\views\projectexam\RewardExam.vue
-->
<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name:'WorkPlace' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目审核</el-breadcrumb-item>
      <el-breadcrumb-item>获奖成果审核</el-breadcrumb-item>
    </el-breadcrumb>
    <!--待办任务卡片区-->
    <div style="display:flex">
      <div style="width:49%">
        <el-card shadow="always">
          <div class="Titletext">我的待办</div>
          <div class="text">{{ notpass }}个任务</div>
        </el-card>
      </div>
      <div style="width:49%;margin-left:2%">
        <el-card shadow="always">
          <div class="Titletext">本周完成任务数</div>
          <div class="text">{{ pass }}个任务</div>
        </el-card>
      </div>
    </div>
    <!--列表卡片区-->
    <el-card
      style="margin-top: 24px"
    >
      <el-row>
        <el-col>
          获奖成果列表
        </el-col>
        <el-radio-group v-model="filterStatus" style="width:250px;float:right;margin-bottom:15px">
          <el-radio-button label="全部">全部</el-radio-button>
          <el-radio-button label="审核通过">审核通过</el-radio-button>
          <el-radio-button label="未审核">未审核</el-radio-button>
        </el-radio-group>
        <el-input v-model="queryInfo.query" placeholder="请输入获奖名称" clearable style="width:250px;float:right;margin-bottom:15px;margin-right:10px" @clear="search">
          <el-button slot="append" icon="el-icon-search" @click="search" />
        </el-input>
      </el-row>
      <el-row>
        <el-table v-if="filterStatus !=='全部'" class="table" :row-class-name="rowClassName" :data="myFiles" border stripe>
          <!-- <el-table-column prop="id" label="#" width="50px" /> -->
          <!-- <el-table-column prop="projectExamineVo.projectName" label="项目名" />
          <el-table-column prop="projectExamineVo.fileMap.logo" label="logo">
            <template #default="scope">
              <el-image
                style="width: 90px; height: 90px"
                :src="scope.row.fileMap.logo"
                :preview-src-list="[scope.row.fileMap.logo]"
              />
            </template>
          </el-table-column> -->
          <el-table-column
            width="50px"
            label="#"
          >
            <!-- 跨页连续排序 -->
            <template slot-scope="scope">
              <span>{{ (queryInfo.pagenum-1)*queryInfo.pagesize+(scope.$index + 1) }} </span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="projectExamineVo.projectName" label="项目名" width="220px">
            <template slot-scope="scope">
              <el-row>
                <el-col class="NameF">
                  <el-popover placement="top-start" title="" trigger="hover">
                    <img :src="scope.row.projectExamineVo.fileMap.logo?scope.row.projectExamineVo.fileMap.logo:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'" alt="" style="width: 150px;height: 150px">
                    <img slot="reference" :src="scope.row.projectExamineVo.fileMap.logo?scope.row.projectExamineVo.fileMap.logo:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'" style="width: 80px;height: 80px">
                  </el-popover>
                  <span class="NameStyle">{{ scope.row.projectExamineVo.projectName }}</span>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column prop="awardedName" label="获奖名称" />
          <el-table-column prop="leaderId" label="负责人" />
          <el-table-column prop="awardedTime" label="获奖时间" width="180px" />
          <el-table-column prop="issuingDepartment" label="发布单位" />
          <el-table-column prop="awardedNumber" label="获奖编号" />
          <el-table-column prop="examineStatus" label="审核状态" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-thumb"
                size="mini"
                @click="detail(scope.row)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-else class="table" :row-class-name="rowClassName" :data="projectlist" border stripe>
          <el-table-column prop="id" label="#" width="50px" />
          <el-table-column :show-overflow-tooltip="true" prop="projectExamineVo.projectName" label="项目名" width="220px">
            <template slot-scope="scope">
              <el-row>
                <el-col class="NameF">
                  <el-popover placement="top-start" title="" trigger="hover">
                    <img :src="scope.row.projectExamineVo.fileMap.logo?scope.row.projectExamineVo.fileMap.logo:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'" alt="" style="width: 150px;height: 150px">
                    <img slot="reference" :src="scope.row.projectExamineVo.fileMap.logo?scope.row.projectExamineVo.fileMap.logo:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'" style="width: 80px;height: 80px">
                  </el-popover>
                  <span class="NameStyle">{{ scope.row.projectExamineVo.projectName }}</span>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column prop="awardedName" label="获奖名称" />
          <el-table-column prop="leaderId" label="负责人" />
          <el-table-column prop="awardedTime" label="获奖时间" width="180px" />
          <el-table-column prop="levelId" label="获奖等级" />
          <el-table-column prop="issuingDepartment" label="发布单位" />
          <el-table-column prop="awardedNumber" label="获奖编号" />
          <el-table-column prop="examineStatus" label="审核状态" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-thumb"
                size="mini"
                @click="detail(scope.row)"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页区域 -->
      <el-pagination
        v-if="filterStatus ==='全部'"
        style="text-align: right;"
        :current-page="queryInfo.pagenum"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totle"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <el-pagination
        v-else
        style="text-align: right;"
        :current-page="queryInfo.pagenum"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="myFiles.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script>
import axios from 'axios'
import crypto from '../../crypto/crypto'
export default {
  name: 'Rewardexam',
  data() {
    return {
      filterStatus: '全部',
      queryInfo: {
        query: '',
        // 当前页数
        pagenum: 1,
        // 每页显示多少数据
        pagesize: 5
      },
      projectlist: [],
      totle: 0,
      projectInfo: [],
      levelList: [],
      userlist: [],
      notpass: 0,
      pass: 0
    }
  },
  computed: {
    myFiles: function() {
      return this.projectlist.filter(item => item.examineStatus === this.filterStatus)
    }
  },
  created() {
    this.getProjectList()
    this.getLevelList()
    this.getUserlist()
    // this.getLogo()
  },
  methods: {
    rowClassName({ row, rowIndex }) {
      row.id = rowIndex + 1
    },
    filterAll() {
      this.myFiles = this.projectlist
    },
    /**
     * @description: 获取项目
     * @param {*}
     * @return {*}
     * @author: xu xuejia
     */
    async getProjectList() {
      await axios.get('achievement/searchAll/awarded', { params: { pageNum: this.queryInfo.pagenum, pageSize: this.queryInfo.pagesize }})
        .then((response) => {
          if (response.data.data) {
            this.projectlist = response.data.data.list
            this.totle = response.data.data.total
            for (let index = 0; index < this.projectlist.length; index++) {
              this.projectlist[index].awardedTime = this.getdata(this.projectlist[index].awardedTime)
            }
            for (let index = 0; index < this.projectlist.length; index++) {
              this.projectlist[index].levelId = this.getLevel(this.projectlist[index].levelId)
            }
            for (let index = 0; index < this.projectlist.length; index++) {
              this.projectlist[index].leaderId = this.getName(this.projectlist[index].leaderId)
            }
          }
        }).catch(error => {
          console.log(error)
        })
      for (var i = 0; i < this.projectlist.length; i++) {
        if (this.projectlist[i].examineStatus === '审核通过') {
          this.pass++
        } else if (this.projectlist[i].examineStatus === '未审核') {
          this.notpass++
        }
      }
    },
    // getLogo() {
    //   axios.get('projectFile/getLogo', { params: { projectId: this.projectId }})
    //     .then((response) => {
    //       this.logo = response.data.data
    //     }).catch(error => {
    //       console.log(error)
    //     })
    // },
    /**
     * @description: 搜索框
     * @param {*}
     * @return {*}
     * @author: xu xuejia
     */
    search() {
      // this.projectName = projectName.projectName
      axios.get('achievement/searchByName/awarded', { params: { pageNum: this.queryInfo.pagenum, pageSize: this.queryInfo.pagesize, achievementName: this.queryInfo.query }})
        .then((response) => {
          var dataarr = (JSON.stringify(response.data.data) === 'null') // 搜索的项目不存在时给message提示
          if (dataarr === true) {
            this.$message({
              showClose: true,
              type: 'warning',
              message: '项目不存在！'
            })
          }
          this.projectlist = response.data.data.list
          this.totle = response.data.data.total
          for (let index = 0; index < this.projectlist.length; index++) {
            this.projectlist[index].awardedTime = this.getdata(this.projectlist[index].awardedTime)
          }
          for (let index = 0; index < this.projectlist.length; index++) {
            this.projectlist[index].levelId = this.getLevel(this.projectlist[index].levelId)
          }
          for (let index = 0; index < this.projectlist.length; index++) {
            this.projectlist[index].leaderId = this.getName(this.projectlist[index].leaderId)
          }
        })
    },
    /**
     * @description: 查看详情
     * @param {*} row
     * @return {*}
     * @author: xu xuejia
     */
    detail(row) {
      var pa = crypto.set('34')
      // var pa = crypto.set('37')
      this.projectInfo = row
      sessionStorage.setItem('projectInfo', JSON.stringify(this.projectInfo))
      this.$router.push({ path: '/' + pa, params: { data: this.projectInfo }})
    },
    /**
     * @description: 页码改变以及页面条数改变
     * @param {*}
     * @return {*}
     * @author: xu xuejia
     */
    // 监听 pagesize改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getProjectList()
    },
    // 监听 页码值 改变事件
    handleCurrentChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pagenum = newSize
      this.getProjectList()
    },
    /**
     * @description: 转各种id
     * @param {*}
     * @return {*}
     * @author: xu xuejia
     */
    // 转换时间
    getdata(data) {
      var date = new Date(data)
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
    },
    // 转换级别Id
    getLevel(data) {
      // for (let i = 0; i < this.levelList.length; i++) {
      //   if (this.levelList[i].levelId === data) {
      //     return this.levelList[i].levelName
      //   }
      // }
      if (this.levelList[data] === null) {
        return null
      } else return this.levelList[data].name
    },
    getLevelList() {
      // axios.get('dictionary/searchAll/level').then((response) => {
      //   this.levelList = response.data.data
      // }).catch(error => {
      //   console.log(error)
      // })
      this.levelList = JSON.parse(this.$store.getters.getlevel)
    },
    getUserlist() {
      this.userlist = JSON.parse(this.$store.getters.getuser)
      // console.log(this.userlist)
    },
    getName(data) {
      if (this.userlist[data] === null) {
        return null
      } else return this.userlist[data].realname
    }
  }
}
</script>
<style lang="scss" scoped>
.table {
  width:100%;
  /* // height:150px; */
  overflow:hidden;
}
.text{
  font-size: 24px;
  text-align: center;
}
.Titletext{
  font-size: 13px;
  color: #999;
  text-align: center;
}
.NameStyle{
   text-align: top;
   vertical-align: middle;
   margin-top: auto;
   margin-bottom: auto;
   display:inline-block;
   align-self:center
}
.NameF{
  display:flex
}
</style>
